<template>
    <div class="personal-account">
        <el-header>
            <p>个人账号</p>
        </el-header>
        <el-main>
            <el-tabs v-model="information" @tab-click="handleClick">
                <el-tab-pane label="个人信息" name="personal">
                    <div class="info-avatar">
                        <el-avatar :size="78" :src="avatarUrl" fit="fill">
                            <!-- 默认显示的头像图片 -->
                            <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"/>
                        </el-avatar>
                    </div>
                    <div class="info-user">
                        <div class="content">
                           <div class="item">
                                <span>账号：</span>
                                <span>{{ profile.phone }}</span>
                            </div>
                            <div class="item">
                                <span>用户名：</span>
                                <span>{{ profile.nick_name }}</span>
                            </div>
                            <div class="item">
                                <span>性别：</span>
                                <span>{{ gender }}</span>
                            </div>
                            <div class="item">
                                <span>地区：</span>
                                <span></span>
                            </div> 
                        </div>
                        
                    </div>
                </el-tab-pane>
                <el-tab-pane label="人脸信息" name="face">
                    <el-table
                    :data="faceInfo"
                    style="width: 100%"
                    border>
                        <el-table-column
                            label="序号"
                            type="index"
                            width="100"
                            >
                        </el-table-column>
                        <el-table-column
                            prop="faceId"
                            label="人脸ID"
                            >
                        </el-table-column>
                        <el-table-column
                            prop="face"
                            label="人脸">
                        </el-table-column>
                        <el-table-column
                            prop="time"
                            label="设置时间">
                        </el-table-column>
                        <el-table-column
                            prop="operation"
                            label="操作">
                            <template slot-scope="scope">
                                <el-button
                                @click.native.prevent="deleteRow(scope.$index, faceInfo)"
                                type="text"
                                size="small"
                                style="color: #4065e0">
                                删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="三方登录信息" name="third">
                    <el-table
                    :data="thirdInfo"
                    style="width: 100%"
                    border>
                        <el-table-column
                            label="序号"
                            type="index"
                            width="100"
                            >
                        </el-table-column>
                        <el-table-column
                            prop="thirdName"
                            label="三方名称"
                            >
                        </el-table-column>
                        <el-table-column
                            prop="account"
                            label="账号">
                        </el-table-column>
                        <el-table-column
                            prop="status"
                            label="状态">
                        </el-table-column>
                        <el-table-column
                            prop="operation"
                            label="操作">
                            <template slot-scope="scope">
                                <el-button
                                @click.native.prevent="logOut(scope.$index, thirdInfo)"
                                type="text"
                                size="small"
                                style="color: #4065e0">
                                {{ scope.row.status == '登录' ? '退出登录' : '登录' }}
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-main>
    </div>
</template>

<script>
import { getUserInfo } from '@/api/index'
export default {
    name: 'PersonAccount',
    data() {
        return {
            information: 'personal',
            avatarUrl: this.$store.state.avatarUrl,
            profile: {},
            gender: '',
            faceInfo: [
                { faceId: '1G1BL52P7TR115520', face: '面部1', time: '2019-07-29 14:35:34', operation: '' }
            ],
            thirdInfo: [
                { thirdName: '酷狗', account: '1334657765', status: '登录' }
            ]
        }
    },
    methods: {
        handleClick(tab, event){

        },
        getUserMsg(){
            var params = {
                nngUid: this.$store.state.userInfo.user_id
            }
            getUserInfo(params).then(res => {
                console.log(res)
                if(res.response_code == 0){
                    this.profile = res.result.user_profile
                    if(this.profile.gender == 1){
                        this.gender = '男'
                    }else if(this.profile.gender == 2){
                        this.gender = '女'
                    }else{
                        this.gender = '未知'
                    }
                }
                
            })
        },
        deleteRow(index, rows){
            rows.splice(index, 1);
        },
        logOut(index, rows){

        }
    },
    created(){
        this.getUserMsg()
    }
}
</script>

<style lang="scss" scoped>
.personal-account{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #ffffff;
    // overflow: hidden;
    .el-header{
        height: 50px !important;
        line-height: 50px;
        p{
            font-weight: bold;
        }
    }
    .el-main{
       position: absolute;
       left: 0;
       right: 0;
       top: 50px;
       background-color: #ffffff;
        .info-avatar{
            height: 150px;
            background-color: rgb(233, 229, 229);
            text-align: center;
            .el-avatar{
                margin-top: 36px;
            }
        }
        .info-user{
            position: relative;
            background-color: #ffffff;
            height: 374px;
            .content{
                position: absolute;
                left: 50%;
                top: 10%;
                transform: translateX(-50%);
                .item{
                    display: flex;
                    // justify-content: space-between;
                    line-height: 50px;
                    span{
                        width: 100px;
                    }
                }
            }
            
        }
    }
}
</style>

